<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <Header />
    <!-- 左侧导航栏 -->
    <aside
      class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto"
    >
      <nav class="py-4">
        <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
          <div
            class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
            :class="{ 'bg-blue-700': menu.active }"
            @click="toggleMenu(index)"
          >
            <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
            <span>{{ menu.name }}</span>
            <i
              class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
              :class="{ 'transform rotate-180': menu.expanded }"
            ></i>
          </div>
          <div v-if="menu.expanded" class="bg-gray-900">
            <div
              v-for="(submenu, subIndex) in menu.subMenus"
              :key="subIndex"
              class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
              :class="{ 'text-blue-400': submenu.active }"
              @click="selectSubmenu(index, subIndex)"
            >
              <a
                v-if="submenu.link"
                :href="submenu.link"
                data-readdy="true"
                class="text-sm w-full"
                >{{ submenu.name }}</a
              >
              <span v-else class="text-sm">{{ submenu.name }}</span>
            </div>
          </div>
        </div>
      </nav>
    </aside>
    <!-- 主内容区域 -->
    <main class="pt-16 pl-64">
      <div class="container mx-auto p-6">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm mb-4 text-gray-500">
          <span>首页</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span>综合分析</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span class="text-blue-600">联网与设备分析</span>
        </div>
        <!-- 顶部概览卡片 -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <!-- 设备联网率卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4"
            >
              <i class="fas fa-wifi text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">设备联网率</div>
              <div class="text-2xl font-bold text-gray-900">92.6%</div>
              <div class="text-xs text-green-600 flex items-center">
                <i class="fas fa-arrow-up mr-1"></i> 较上月提升 2.3%
              </div>
            </div>
          </div>
          <!-- 设备总数卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4"
            >
              <i class="fas fa-cogs text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">设备总数</div>
              <div class="text-2xl font-bold text-gray-900">3,842</div>
              <div class="text-xs text-gray-600 flex items-center">
                <span class="text-green-600">在线: 3,556</span>
                <span class="mx-1">|</span>
                <span class="text-red-600">离线: 286</span>
              </div>
            </div>
          </div>
          <!-- 故障设备卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4"
            >
              <i class="fas fa-exclamation-triangle text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">故障设备</div>
              <div class="text-2xl font-bold text-gray-900">156</div>
              <div class="text-xs text-yellow-600 flex items-center">
                <i class="fas fa-tools mr-1"></i> 处理中: 42 台
              </div>
            </div>
          </div>
          <!-- 设备健康评分卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4"
            >
              <i class="fas fa-heartbeat text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">健康评分</div>
              <div class="text-2xl font-bold text-gray-900">86.5</div>
              <div class="text-xs text-indigo-600 flex items-center">
                <i class="fas fa-certificate mr-1"></i> 优良
              </div>
            </div>
          </div>
        </div>
        <!-- 设备联网状态分析 -->
        <div class="grid grid-cols-3 gap-6 mb-6">
          <!-- 设备联网率趋势 -->
          <div class="bg-white rounded-lg shadow-sm p-4 col-span-2">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">设备联网率趋势</h2>
              <!-- 设备联网率趋势按钮部分 -->
              <div class="flex space-x-2">
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentConnectPeriod === 'week'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changeConnectPeriod('week')"
                >
                  周
                </button>
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentConnectPeriod === 'month'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changeConnectPeriod('month')"
                >
                  月
                </button>
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentConnectPeriod === 'year'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changeConnectPeriod('year')"
                >
                  年
                </button>
              </div>
            </div>
            <div
              id="connectRateChart"
              class="h-80"
              ref="connectRateChart"
            ></div>
          </div>
          <!-- 设备联网状态分布 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">联网状态分布</h2>
              <div class="text-xs text-gray-500">
                <i class="fas fa-sync-alt mr-1"></i> 更新于 {{ currentTime }}
              </div>
            </div>
            <div
              id="connectStatusChart"
              class="h-80"
              ref="connectStatusChart"
            ></div>
          </div>
        </div>
        <!-- 设备运行状态分析 -->
        <div class="grid grid-cols-3 gap-6 mb-6">
          <!-- 设备类型分布 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">设备类型分布</h2>
              <div class="text-xs text-gray-500">
                <span class="text-blue-600 font-medium">{{
                  deviceTypeTotal
                }}</span>
                台设备
              </div>
            </div>
            <div id="deviceTypeChart" class="h-80" ref="deviceTypeChart"></div>
          </div>
          <!-- 设备运行状态 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">设备运行状态</h2>
              <div class="text-xs text-gray-500">
                <span class="text-green-600 font-medium">{{
                  deviceRunningCount
                }}</span>
                台正常运行
              </div>
            </div>
            <div
              id="deviceStatusChart"
              class="h-80"
              ref="deviceStatusChart"
            ></div>
          </div>
          <!-- 设备运行时长分布 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">设备运行时长分布</h2>
              <div class="text-xs text-gray-500">
                平均运行:
                <span class="text-blue-600 font-medium">{{
                  avgRunningHours
                }}</span>
                小时/天
              </div>
            </div>
            <div
              id="deviceRunningHoursChart"
              class="h-80"
              ref="deviceRunningHoursChart"
            ></div>
          </div>
        </div>
        <!-- 设备故障分析 -->
        <div class="grid grid-cols-2 gap-6 mb-6">
          <!-- 故障类型分析 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">故障类型分析</h2>
              <div class="flex space-x-2">
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentFaultPeriod === 'month'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changeFaultPeriod('month')"
                >
                  本月
                </button>
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentFaultPeriod === 'quarter'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changeFaultPeriod('quarter')"
                >
                  本季度
                </button>
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentFaultPeriod === 'year'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changeFaultPeriod('year')"
                >
                  本年度
                </button>
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <div
                  id="faultTypeChart"
                  class="h-60"
                  ref="faultTypeChart"
                ></div>
              </div>
              <div>
                <h3 class="font-medium text-sm text-gray-700 mb-3">
                  高发故障TOP5
                </h3>
                <div class="space-y-3">
                  <div
                    v-for="(fault, index) in topFaults"
                    :key="index"
                    class="bg-gray-50 p-3 rounded-lg"
                  >
                    <div class="flex justify-between items-center">
                      <div class="flex items-center">
                        <div
                          class="w-6 h-6 rounded-full flex items-center justify-center mr-2"
                          :class="fault.iconBg"
                        >
                          <i
                            :class="fault.icon + ' text-xs ' + fault.iconColor"
                          ></i>
                        </div>
                        <div>
                          <div class="text-sm font-medium text-gray-800">
                            {{ fault.name }}
                          </div>
                          <div class="text-xs text-gray-500">
                            发生次数: {{ fault.count }}
                          </div>
                        </div>
                      </div>
                      <div class="text-sm font-bold" :class="fault.valueColor">
                        {{ fault.percentage }}%
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 故障处理状态 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">故障处理状态</h2>
              <div class="text-xs text-gray-500">
                平均修复时间:
                <span class="text-blue-600 font-medium">{{
                  avgRepairTime
                }}</span>
                小时
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <div
                  id="faultStatusChart"
                  class="h-60"
                  ref="faultStatusChart"
                ></div>
              </div>
              <div>
                <div
                  id="faultTrendChart"
                  class="h-60"
                  ref="faultTrendChart"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 设备健康评分 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">设备健康评分</h2>
            <div class="flex space-x-2">
              <button
                class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                :class="
                  currentHealthView === 'type'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-700'
                "
                @click="changeHealthView('type')"
              >
                按设备类型
              </button>
              <button
                class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                :class="
                  currentHealthView === 'workshop'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-700'
                "
                @click="changeHealthView('workshop')"
              >
                按车间
              </button>
              <button
                class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                :class="
                  currentHealthView === 'line'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-700'
                "
                @click="changeHealthView('line')"
              >
                按生产线
              </button>
            </div>
          </div>
          <div class="grid grid-cols-3 gap-6">
            <div>
              <div
                id="healthScoreRadarChart"
                class="h-80"
                ref="healthScoreRadarChart"
              ></div>
            </div>
            <div>
              <h3 class="font-medium text-sm text-gray-700 mb-3">
                评分指标明细
              </h3>
              <div class="space-y-3">
                <div
                  v-for="(metric, index) in healthMetrics"
                  :key="index"
                  class="bg-gray-50 p-3 rounded-lg"
                >
                  <div class="flex justify-between items-center mb-1">
                    <span class="text-sm text-gray-700">{{ metric.name }}</span>
                    <span class="text-sm font-medium" :class="metric.scoreColor"
                      >{{ metric.score }} 分</span
                    >
                  </div>
                  <div class="w-full bg-gray-200 rounded-full h-2">
                    <div
                      class="h-2 rounded-full"
                      :style="{
                        width: metric.percentage + '%',
                        backgroundColor: metric.color,
                      }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div
                id="healthScoreTrendChart"
                class="h-80"
                ref="healthScoreTrendChart"
              ></div>
            </div>
          </div>
        </div>
        <!-- 关键设备实时监测 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">关键设备实时监测</h2>
            <router-link
              to="/all-equipment"
              class="text-sm text-blue-600 cursor-pointer"
              >查看全部设备</router-link
            >
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    设备名称
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    所属车间
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    运行状态
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    当前负载
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    温度
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    振动值
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    健康评分
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    操作
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr
                  v-for="(device, index) in keyDevices"
                  :key="index"
                  class="hover:bg-gray-50"
                >
                  <td class="px-4 py-3">
                    <div class="flex items-center justify-center">
                      <div
                        class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                        :class="device.iconBg"
                      >
                        <i :class="device.icon + ' ' + device.iconColor"></i>
                      </div>
                      <div>
                        <div class="text-sm font-medium text-gray-900">
                          {{ device.name }}
                        </div>
                        <div class="text-xs text-gray-500">
                          ID: {{ device.id }}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm text-gray-900 justify-center">
                      {{ device.workshop }}
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="flex items-center justify-center">
                      <span
                        class="h-2.5 w-2.5 rounded-full mr-2"
                        :class="device.statusColor"
                      ></span>
                      <span class="text-sm text-gray-900">{{
                        device.status
                      }}</span>
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm text-gray-900">{{ device.load }}</div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                      <div
                        class="h-1.5 rounded-full"
                        :style="{
                          width: device.loadPercentage + '%',
                          backgroundColor: device.loadColor,
                        }"
                      ></div>
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm" :class="device.tempColor">
                      {{ device.temperature }}
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm" :class="device.vibrationColor">
                      {{ device.vibration }}
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="flex items-center justify-center">
                      <div
                        class="text-sm font-medium"
                        :class="device.scoreColor"
                      >
                        {{ device.healthScore }}
                      </div>
                      <div class="ml-2 w-16 bg-gray-200 rounded-full h-1.5">
                        <div
                          class="h-1.5 rounded-full"
                          :style="{
                            width: device.healthScore + '%',
                            backgroundColor: device.scoreColor.replace(
                              'text-',
                              'bg-'
                            ),
                          }"
                        ></div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2 justify-center">
                      <button
                        @click="showDeviceDetail(device)"
                        class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer"
                      >
                        详情
                      </button>
                      <button
                        @click="monitorDevice(device)"
                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer"
                      >
                        监控
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Header from "../components/Header.vue";
import { ElMessageBox, ElMessage } from "element-plus";

export default {
  components: {
    Header,
  },
  data() {
    return {
      currentConnectPeriod: "month",
      currentFaultPeriod: "month",
      currentHealthView: "workshop",
      timeInterval: null,
      currentTime: "2025-07-08 15:32:45",
      mainMenus: [
        {
          name: "监测报警",
          icon: "fas fa-bell",
          expanded: false,
          active: false,
          subMenus: [
            { name: "数据汇聚功能", active: false, link: "/data-aggregation" },
            {
              name: "监测指标统计",
              active: false,
              link: "/monitoring-indicators",
            },
            { name: "区域化展示", active: false, link: "/regional-display" },
          ],
        },
        {
          name: "风险研判",
          icon: "fas fa-exclamation-triangle",
          expanded: false,
          active: false,
          subMenus: [
            { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: true, link: '/risk-analysis' },
                    ]
        },
        {
          name: "在线巡查",
          icon: "fas fa-search",
          expanded: false,
          active: false,
          subMenus: [
            {
              name: "企业信息汇总",
              active: false,
              link: "/summary-information",
            },
            { name: "巡查功能", active: false, link: "/patrol" },
            { name: "检索功能", active: false, link: "search" },
            { name: "一屏汇聚展示", active: false, link: "/screen-display" },
          ],
        },
        {
          name: "综合分析",
          icon: "fas fa-chart-line",
          expanded: true,
          active: true,
          subMenus: [
            { name: "联网与设备分析", active: true, link: "/equipment" },
            { name: "应用情况分析", active: false, link: "/application" },
            { name: "数据质量分析", active: false, link: "/data-quality" },
            { name: "定期专题报告", active: false, link: "report" },
          ],
        },
        {
          name: "系统管理",
          icon: "fas fa-cog",
          expanded: false,
          active: false,
          subMenus: [
            { name: "用户权限管理", active: false, link: "user-permission" },
            { name: "系统配置管理", active: false, link: "system-manage" },
            { name: "数据管理", active: false, link: "data-manage" },
            { name: "系统监控与维护", active: false, link: "monitoring" },
          ],
        },
      ],
      deviceTypeTotal: 3842,
      deviceRunningCount: 3556,
      avgRunningHours: 18.6,
      avgRepairTime: 4.8,
      healthMetrics: [
        {
          name: "运行稳定性",
          score: 88,
          percentage: 88,
          color: "#4299e1",
          scoreColor: "text-blue-600",
        },
        {
          name: "设备完好率",
          score: 92,
          percentage: 92,
          color: "#48bb78",
          scoreColor: "text-green-600",
        },
        {
          name: "故障频率",
          score: 85,
          percentage: 85,
          color: "#ecc94b",
          scoreColor: "text-yellow-600",
        },
        {
          name: "维护及时性",
          score: 90,
          percentage: 90,
          color: "#9f7aea",
          scoreColor: "text-purple-600",
        },
        {
          name: "能耗水平",
          score: 78,
          percentage: 78,
          color: "#ed8936",
          scoreColor: "text-orange-600",
        },
      ],
      keyDevices: [
        {
          id: "DEV-HGL-001",
          name: "1号高炉",
          workshop: "炼铁车间",
          icon: "fas fa-fire",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "85%",
          loadPercentage: 85,
          loadColor: "#48bb78",
          temperature: "1450 °C",
          tempColor: "text-orange-600",
          vibration: "2.4 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 92,
          scoreColor: "text-green-600",
        },
        {
          id: "DEV-LLJ-002",
          name: "2号连铸机",
          workshop: "连铸车间",
          icon: "fas fa-industry",
          iconBg: "bg-blue-100",
          iconColor: "text-blue-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "78%",
          loadPercentage: 78,
          loadColor: "#48bb78",
          temperature: "320 °C",
          tempColor: "text-yellow-600",
          vibration: "3.1 mm/s",
          vibrationColor: "text-yellow-600",
          healthScore: 85,
          scoreColor: "text-yellow-600",
        },
        {
          id: "DEV-ZLU-003",
          name: "3号转炉",
          workshop: "炼钢车间",
          icon: "fas fa-fire-alt",
          iconBg: "bg-orange-100",
          iconColor: "text-orange-600",
          status: "警告",
          statusColor: "bg-yellow-500",
          load: "92%",
          loadPercentage: 92,
          loadColor: "#ed8936",
          temperature: "1580 °C",
          tempColor: "text-red-600",
          vibration: "4.2 mm/s",
          vibrationColor: "text-red-600",
          healthScore: 76,
          scoreColor: "text-yellow-600",
        },
        {
          id: "DEV-RZJ-004",
          name: "热轧机组",
          workshop: "热轧车间",
          icon: "fas fa-cogs",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
          status: "正常运行",
          statusColor: "bg-green-500",
          load: "65%",
          loadPercentage: 65,
          loadColor: "#4299e1",
          temperature: "850 °C",
          tempColor: "text-orange-600",
          vibration: "2.8 mm/s",
          vibrationColor: "text-yellow-600",
          healthScore: 88,
          scoreColor: "text-green-600",
        },
        {
          id: "DEV-LZJ-005",
          name: "冷轧机组",
          workshop: "冷轧车间",
          icon: "fas fa-snowflake",
          iconBg: "bg-teal-100",
          iconColor: "text-teal-600",
          status: "故障",
          statusColor: "bg-red-500",
          load: "0%",
          loadPercentage: 0,
          loadColor: "#a0aec0",
          temperature: "45 °C",
          tempColor: "text-green-600",
          vibration: "0.5 mm/s",
          vibrationColor: "text-green-600",
          healthScore: 65,
          scoreColor: "text-red-600",
        },
      ],
    };
  },
  //计算属性
  computed: {
    topFaults() {
      switch (this.currentFaultPeriod) {
        case "month":
          return [
            {
              name: "电机过热",
              count: 28,
              percentage: 18.5,
              icon: "fas fa-temperature-high",
              iconBg: "bg-red-100",
              iconColor: "text-red-600",
              valueColor: "text-red-600",
            },
            {
              name: "传感器故障",
              count: 23,
              percentage: 15.2,
              icon: "fas fa-microchip",
              iconBg: "bg-yellow-100",
              iconColor: "text-yellow-600",
              valueColor: "text-yellow-600",
            },
            {
              name: "液压系统泄漏",
              count: 19,
              percentage: 12.6,
              icon: "fas fa-tint",
              iconBg: "bg-blue-100",
              iconColor: "text-blue-600",
              valueColor: "text-blue-600",
            },
            {
              name: "轴承磨损",
              count: 16,
              percentage: 10.6,
              icon: "fas fa-cog",
              iconBg: "bg-gray-100",
              iconColor: "text-gray-600",
              valueColor: "text-gray-600",
            },
            {
              name: "控制系统异常",
              count: 14,
              percentage: 9.3,
              icon: "fas fa-desktop",
              iconBg: "bg-purple-100",
              iconColor: "text-purple-600",
              valueColor: "text-purple-600",
            },
          ];
        case "quarter":
          return [
            {
              name: "电机过热",
              count: 85,
              percentage: 17.0,
              icon: "fas fa-temperature-high",
              iconBg: "bg-red-100",
              iconColor: "text-red-600",
              valueColor: "text-red-600",
            },
            {
              name: "传感器故障",
              count: 72,
              percentage: 14.4,
              icon: "fas fa-microchip",
              iconBg: "bg-yellow-100",
              iconColor: "text-yellow-600",
              valueColor: "text-yellow-600",
            },
            {
              name: "液压系统泄漏",
              count: 58,
              percentage: 11.6,
              icon: "fas fa-tint",
              iconBg: "bg-blue-100",
              iconColor: "text-blue-600",
              valueColor: "text-blue-600",
            },
            {
              name: "轴承磨损",
              count: 45,
              percentage: 9.0,
              icon: "fas fa-cog",
              iconBg: "bg-gray-100",
              iconColor: "text-gray-600",
              valueColor: "text-gray-600",
            },
            {
              name: "控制系统异常",
              count: 38,
              percentage: 7.6,
              icon: "fas fa-desktop",
              iconBg: "bg-purple-100",
              iconColor: "text-purple-600",
              valueColor: "text-purple-600",
            },
          ];
        case "year":
          return [
            {
              name: "电机过热",
              count: 320,
              percentage: 16.0,
              icon: "fas fa-temperature-high",
              iconBg: "bg-red-100",
              iconColor: "text-red-600",
              valueColor: "text-red-600",
            },
            {
              name: "传感器故障",
              count: 285,
              percentage: 14.3,
              icon: "fas fa-microchip",
              iconBg: "bg-yellow-100",
              iconColor: "text-yellow-600",
              valueColor: "text-yellow-600",
            },
            {
              name: "液压系统泄漏",
              count: 210,
              percentage: 10.5,
              icon: "fas fa-tint",
              iconBg: "bg-blue-100",
              iconColor: "text-blue-600",
              valueColor: "text-blue-600",
            },
            {
              name: "轴承磨损",
              count: 185,
              percentage: 9.3,
              icon: "fas fa-cog",
              iconBg: "bg-gray-100",
              iconColor: "text-gray-600",
              valueColor: "text-gray-600",
            },
            {
              name: "控制系统异常",
              count: 165,
              percentage: 8.3,
              icon: "fas fa-desktop",
              iconBg: "bg-purple-100",
              iconColor: "text-purple-600",
              valueColor: "text-purple-600",
            },
          ];
        default:
          return [
            {
              name: "电机过热",
              count: 28,
              percentage: 18.5,
              icon: "fas fa-temperature-high",
              iconBg: "bg-red-100",
              iconColor: "text-red-600",
              valueColor: "text-red-600",
            },
            {
              name: "传感器故障",
              count: 23,
              percentage: 15.2,
              icon: "fas fa-microchip",
              iconBg: "bg-yellow-100",
              iconColor: "text-yellow-600",
              valueColor: "text-yellow-600",
            },
            {
              name: "液压系统泄漏",
              count: 19,
              percentage: 12.6,
              icon: "fas fa-tint",
              iconBg: "bg-blue-100",
              iconColor: "text-blue-600",
              valueColor: "text-blue-600",
            },
            {
              name: "轴承磨损",
              count: 16,
              percentage: 10.6,
              icon: "fas fa-cog",
              iconBg: "bg-gray-100",
              iconColor: "text-gray-600",
              valueColor: "text-gray-600",
            },
            {
              name: "控制系统异常",
              count: 14,
              percentage: 9.3,
              icon: "fas fa-desktop",
              iconBg: "bg-purple-100",
              iconColor: "text-purple-600",
              valueColor: "text-purple-600",
            },
          ];
      }
    },
  },
  mounted() {
    this.initConnectRateChart();
    this.initConnectStatusChart();
    this.initDeviceTypeChart();
    this.initDeviceStatusChart();
    this.initDeviceRunningHoursChart();
    this.initFaultStatusChart();
    this.initFaultTrendChart();
    this.initFaultTypeChart();
    this.initHealthScoreRadarChart();
    this.initHealthScoreTrendChart();
    // 点击页面其他地方关闭下拉菜单
    document.addEventListener("click", this.closeDropdowns);
    // 响应窗口大小变化
    window.addEventListener("resize", this.handleResize);
    // 更新时间
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.timeInterval) {
      clearInterval(this.timeInterval);
    }
    // 移除事件监听器
    document.removeEventListener("click", this.closeDropdowns);
  },
  methods: {
    viewAllEquipment() {
      ElMessageBox.confirm("确定要跳转到全部设备页面吗？", "确认跳转", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          
          this.$router
            .push("/all-equipment")
            .then(() => {
              ElMessage.success("跳转成功");
            })
            .catch((err) => {
              ElMessage.error("跳转失败，请重试");
            });
        })
        .catch(() => {
          ElMessage.info("已取消跳转");
        });
    },
    toggleMenu(index) {
      this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
      // 如果展开了菜单，则将其他菜单收起
      if (this.mainMenus[index].expanded) {
        this.mainMenus.forEach((menu, i) => {
          if (i !== index) {
            menu.expanded = false;
          }
        });
      }
    },
    selectSubmenu(menuIndex, submenuIndex) {
      // 重置所有菜单的激活状态
      this.mainMenus.forEach((menu) => {
        menu.active = false;
        menu.subMenus.forEach((submenu) => {
          submenu.active = false;
        });
      });
      // 设置当前选中的菜单和子菜单为激活状态
      this.mainMenus[menuIndex].active = true;
      this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
    },
    updateCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    handleResize() {
      // 获取所有图表实例并调整大小
      const chartRefs = [
        this.$refs.connectRateChart,
        this.$refs.connectStatusChart,
        this.$refs.deviceTypeChart,
        this.$refs.deviceStatusChart,
        this.$refs.deviceRunningHoursChart,
        this.$refs.faultTypeChart,
        this.$refs.faultStatusChart,
        this.$refs.faultTrendChart,
        this.$refs.healthScoreRadarChart,
        this.$refs.healthScoreTrendChart,
      ];
      chartRefs.forEach((ref) => {
        if (ref) {
          const chart = echarts.getInstanceByDom(ref);
          if (chart) {
            chart.resize();
          }
        }
      });
    },
    changeConnectPeriod(period) {
      this.currentConnectPeriod = period;
      // 根据不同的周期重新渲染图表
      this.updateConnectRateChart(period);
    },
    updateConnectRateChart(period) {
      if (!this.$refs.connectRateChart) return;
      let chart = echarts.getInstanceByDom(this.$refs.connectRateChart);

      // 如果图表实例不存在，则重新初始化
      if (!chart) {
        chart = echarts.init(this.$refs.connectRateChart);
      }
      // 根据周期设置不同的数据
      let xAxisData, seriesData1, seriesData2;
      switch (period) {
        case "week":
          xAxisData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
          seriesData1 = [90.5, 91.2, 92.1, 91.8, 92.3, 92.6, 92.4];
          seriesData2 = [120, 98, 85, 92, 78, 65, 72];
          break;
        case "month":
          xAxisData = [
            "1日",
            "2日",
            "3日",
            "4日",
            "5日",
            "6日",
            "7日",
            "8日",
            "9日",
            "10日",
            "11日",
            "12日",
            "13日",
            "14日",
            "15日",
            "16日",
            "17日",
            "18日",
            "19日",
            "20日",
            "21日",
            "22日",
            "23日",
            "24日",
            "25日",
            "26日",
            "27日",
            "28日",
            "29日",
            "30日",
          ];
          seriesData1 = [
            90.2, 90.5, 91.1, 90.8, 91.3, 91.5, 91.8, 92.0, 91.9, 92.1, 92.3,
            92.2, 92.4, 92.5, 92.3, 92.6, 92.7, 92.5, 92.8, 92.9, 92.7, 92.8,
            93.0, 92.9, 93.1, 93.2, 93.0, 92.8, 92.9, 92.6,
          ];
          seriesData2 = [
            376, 365, 342, 355, 333, 326, 315, 307, 311, 303, 295, 299, 290,
            288, 295, 285, 280, 288, 276, 272, 280, 276, 269, 272, 265, 261,
            269, 276, 272, 284,
          ];
          break;
        case "year":
          xAxisData = [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ];
          seriesData1 = [
            88.5, 89.2, 90.1, 90.8, 91.2, 91.5, 91.8, 92.1, 92.3, 92.5, 92.6,
            92.6,
          ];
          seriesData2 = [
            420, 398, 365, 342, 325, 312, 298, 285, 278, 272, 269, 284,
          ];
          break;
        default:
          xAxisData = [
            "1日",
            "2日",
            "3日",
            "4日",
            "5日",
            "6日",
            "7日",
            "8日",
            "9日",
            "10日",
          ];
          seriesData1 = [
            90.2, 90.5, 91.1, 90.8, 91.3, 91.5, 91.8, 92.0, 91.9, 92.1,
          ];
          seriesData2 = [376, 365, 342, 355, 333, 326, 315, 307, 311, 303];
      }

      // 计算合适的Y轴范围
      const maxRate = Math.max(...seriesData1);
      const minRate = Math.min(...seriesData1);
      const maxOffline = Math.max(...seriesData2);
      // 设置联网率Y轴范围（留出适当空间）
      const rateAxisMax = Math.min(100, Math.ceil(maxRate / 5) * 5 + 5);
      const rateAxisMin = Math.max(0, Math.floor(minRate / 5) * 5 - 5);
      // 设置离线设备数Y轴范围（留出适当空间）
      const offlineAxisMax = Math.ceil(maxOffline / 100) * 100 + 50;
      // 完整的图表配置选项
      const option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "12%", // 增加底部空间给图例
          top: "3%",
          containLabel: true,
        },
        legend: {
          data: ["联网率", "离线设备数"],
          bottom: 0,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
            axisLabel: {
              color: "#718096",
              fontSize: 10,
              interval: period === "month" ? 4 : 0, // 只在月周期设置间隔
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "联网率 (%)",
            min: rateAxisMin,
            max: rateAxisMax,
            interval: 5,
            axisLabel: {
              formatter: "{value}%",
              color: "#718096",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
          },
          {
            type: "value",
            name: "离线设备数",
            min: 0,
            max: offlineAxisMax,
            interval: Math.ceil(offlineAxisMax / 5),
            axisLabel: {
              formatter: "{value}",
              color: "#718096",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "联网率",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 3,
              color: "#4299e1",
            },
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#4299e1",
            },
            data: seriesData1,
          },
          {
            name: "离线设备数",
            type: "bar",
            yAxisIndex: 1,
            barWidth: period === "year" ? "60%" : "40%",
            itemStyle: {
              color: "#fc8181",
              opacity: 0.7,
            },
            data: seriesData2,
          },
        ],
      };

      chart.setOption(option, true);
    },
    initConnectRateChart() {
      this.updateConnectRateChart(this.currentConnectPeriod);
    },
    initConnectStatusChart() {
      if (!this.$refs.connectStatusChart) return;
      const chart = echarts.init(this.$refs.connectStatusChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: "center",
          data: ["稳定在线", "间歇连接", "长时间离线", "从未连接"],
        },
        series: [
          {
            name: "联网状态",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["65%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 3210,
                name: "稳定在线",
                itemStyle: { color: "#48bb78" },
              },
              { value: 346, name: "间歇连接", itemStyle: { color: "#ecc94b" } },
              {
                value: 198,
                name: "长时间离线",
                itemStyle: { color: "#fc8181" },
              },
              { value: 88, name: "从未连接", itemStyle: { color: "#a0aec0" } },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initDeviceTypeChart() {
      if (!this.$refs.deviceTypeChart) return;
      const chart = echarts.init(this.$refs.deviceTypeChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: "center",
          data: [
            "冶炼设备",
            "轧制设备",
            "动力设备",
            "环保设备",
            "检测设备",
            "其他设备",
          ],
        },
        series: [
          {
            name: "设备类型",
            type: "pie",
            radius: "70%",
            center: ["65%", "50%"],
            data: [
              {
                value: 1256,
                name: "冶炼设备",
                itemStyle: { color: "#f56565" },
              },
              { value: 986, name: "轧制设备", itemStyle: { color: "#ed8936" } },
              { value: 685, name: "动力设备", itemStyle: { color: "#ecc94b" } },
              { value: 428, name: "环保设备", itemStyle: { color: "#48bb78" } },
              { value: 312, name: "检测设备", itemStyle: { color: "#4299e1" } },
              { value: 175, name: "其他设备", itemStyle: { color: "#9f7aea" } },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
    initDeviceStatusChart() {
      if (!this.$refs.deviceStatusChart) return;
      const chart = echarts.init(this.$refs.deviceStatusChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: "center",
          data: ["正常运行", "待机", "故障", "维修中", "停机"],
        },
        series: [
          {
            name: "运行状态",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["65%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 3120,
                name: "正常运行",
                itemStyle: { color: "#48bb78" },
              },
              { value: 436, name: "待机", itemStyle: { color: "#4299e1" } },
              { value: 156, name: "故障", itemStyle: { color: "#f56565" } },
              { value: 42, name: "维修中", itemStyle: { color: "#ecc94b" } },
              { value: 88, name: "停机", itemStyle: { color: "#a0aec0" } },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initDeviceRunningHoursChart() {
      if (!this.$refs.deviceRunningHoursChart) return;
      const chart = echarts.init(this.$refs.deviceRunningHoursChart);
      const option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "<8小时",
            "8-12小时",
            "12-16小时",
            "16-20小时",
            "20-24小时",
            "24小时",
          ],
          axisLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
          axisLabel: {
            color: "#718096",
            fontSize: 10,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#718096",
            fontSize: 10,
          },
          splitLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
        },
        series: [
          {
            name: "设备数量",
            type: "bar",
            barWidth: "60%",
            data: [
              {
                value: 245,
                itemStyle: { color: "#9f7aea" },
              },
              {
                value: 386,
                itemStyle: { color: "#4299e1" },
              },
              {
                value: 642,
                itemStyle: { color: "#38b2ac" },
              },
              {
                value: 1256,
                itemStyle: { color: "#48bb78" },
              },
              {
                value: 985,
                itemStyle: { color: "#ecc94b" },
              },
              {
                value: 328,
                itemStyle: { color: "#ed8936" },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    changeFaultPeriod(period) {
      this.currentFaultPeriod = period;
      // 根据不同的周期重新渲染故障类型图表
      this.updateFaultTypeChart(period);
      // 注意：topFaults计算属性会自动更新，因为currentFaultPeriod改变了
    },
    updateFaultTypeChart(period) {
      if (!this.$refs.faultTypeChart) return;
      let chart = echarts.getInstanceByDom(this.$refs.faultTypeChart);

      // 如果图表实例不存在，则重新初始化
      if (!chart) {
        chart = echarts.init(this.$refs.faultTypeChart);
      }

      // 根据周期设置不同的故障数据
      let faultData;

      switch (period) {
        case "month":
          faultData = [
            { value: 28, name: "电机过热", itemStyle: { color: "#f56565" } },
            { value: 23, name: "传感器故障", itemStyle: { color: "#ecc94b" } },
            {
              value: 19,
              name: "液压系统泄漏",
              itemStyle: { color: "#4299e1" },
            },
            { value: 16, name: "轴承磨损", itemStyle: { color: "#a0aec0" } },
            {
              value: 14,
              name: "控制系统异常",
              itemStyle: { color: "#9f7aea" },
            },
            { value: 56, name: "其他故障", itemStyle: { color: "#38b2ac" } },
          ];
          break;
        case "quarter":
          faultData = [
            { value: 85, name: "电机过热", itemStyle: { color: "#f56565" } },
            { value: 72, name: "传感器故障", itemStyle: { color: "#ecc94b" } },
            {
              value: 58,
              name: "液压系统泄漏",
              itemStyle: { color: "#4299e1" },
            },
            { value: 45, name: "轴承磨损", itemStyle: { color: "#a0aec0" } },
            {
              value: 38,
              name: "控制系统异常",
              itemStyle: { color: "#9f7aea" },
            },
            { value: 202, name: "其他故障", itemStyle: { color: "#38b2ac" } },
          ];
          break;
        case "year":
          faultData = [
            { value: 320, name: "电机过热", itemStyle: { color: "#f56565" } },
            { value: 285, name: "传感器故障", itemStyle: { color: "#ecc94b" } },
            {
              value: 210,
              name: "液压系统泄漏",
              itemStyle: { color: "#4299e1" },
            },
            { value: 185, name: "轴承磨损", itemStyle: { color: "#a0aec0" } },
            {
              value: 165,
              name: "控制系统异常",
              itemStyle: { color: "#9f7aea" },
            },
            { value: 835, name: "其他故障", itemStyle: { color: "#38b2ac" } },
          ];
          break;
        default:
          faultData = [
            { value: 28, name: "电机过热", itemStyle: { color: "#f56565" } },
            { value: 23, name: "传感器故障", itemStyle: { color: "#ecc94b" } },
            {
              value: 19,
              name: "液压系统泄漏",
              itemStyle: { color: "#4299e1" },
            },
            { value: 16, name: "轴承磨损", itemStyle: { color: "#a0aec0" } },
            {
              value: 14,
              name: "控制系统异常",
              itemStyle: { color: "#9f7aea" },
            },
            { value: 56, name: "其他故障", itemStyle: { color: "#38b2ac" } },
          ];
      }

      const option = {
        animation: false,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "故障类型",
            type: "pie",
            radius: "80%",
            center: ["50%", "50%"],
            data: faultData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        ],
      };

      chart.setOption(option, true);
    },
    initFaultTypeChart() {
      this.updateFaultTypeChart(this.currentFaultPeriod);
    },
    initFaultStatusChart() {
      if (!this.$refs.faultStatusChart) return;
      const chart = echarts.init(this.$refs.faultStatusChart);
      const option = {
        animation: false,
        title: {
          text: "故障处理状态",
          left: "center",
          top: 0,
          textStyle: {
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "处理状态",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "55%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 42, name: "处理中", itemStyle: { color: "#ecc94b" } },
              { value: 68, name: "已修复", itemStyle: { color: "#48bb78" } },
              { value: 46, name: "待处理", itemStyle: { color: "#f56565" } },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initFaultTrendChart() {
      if (!this.$refs.faultTrendChart) return;
      const chart = echarts.init(this.$refs.faultTrendChart);
      const option = {
        animation: false,
        title: {
          text: "故障发生趋势",
          left: "center",
          top: 0,
          textStyle: {
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1周", "2周", "3周", "4周"],
            axisLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
            axisLabel: {
              color: "#718096",
              fontSize: 10,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#718096",
              fontSize: 10,
            },
            splitLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
          },
        ],
        series: [
          {
            name: "故障数量",
            type: "bar",
            barWidth: "60%",
            data: [
              {
                value: 42,
                itemStyle: { color: "#f56565" },
              },
              {
                value: 38,
                itemStyle: { color: "#f56565" },
              },
              {
                value: 45,
                itemStyle: { color: "#f56565" },
              },
              {
                value: 31,
                itemStyle: { color: "#f56565" },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    changeHealthView(viewType) {
      this.currentHealthView = viewType;
      // 根据不同的视图类型更新健康评分图表
      this.updateHealthScoreCharts(viewType);
    },
    updateHealthScoreCharts(viewType) {
      // 更新雷达图数据
      this.updateHealthScoreRadarChart(viewType);
      // 更新趋势图数据
      this.updateHealthScoreTrendChart(viewType);
      // 更新指标明细数据
      this.updateHealthMetrics(viewType);
    },
    updateHealthScoreRadarChart(viewType) {
      if (!this.$refs.healthScoreRadarChart) return;
      let chart = echarts.getInstanceByDom(this.$refs.healthScoreRadarChart);

      if (!chart) {
        chart = echarts.init(this.$refs.healthScoreRadarChart);
      }

      // 根据视图类型设置不同的雷达图数据
      let currentData, lastData, indicators;

      switch (viewType) {
        case "type":
          indicators = [
            { name: "冶炼设备", max: 100 },
            { name: "轧制设备", max: 100 },
            { name: "动力设备", max: 100 },
            { name: "环保设备", max: 100 },
            { name: "检测设备", max: 100 },
          ];
          currentData = [85, 88, 82, 90, 87];
          lastData = [80, 85, 78, 88, 82];
          break;
        case "workshop":
          indicators = [
            { name: "炼铁车间", max: 100 },
            { name: "炼钢车间", max: 100 },
            { name: "连铸车间", max: 100 },
            { name: "热轧车间", max: 100 },
            { name: "冷轧车间", max: 100 },
          ];
          currentData = [88, 85, 90, 87, 82];
          lastData = [85, 82, 88, 84, 78];
          break;
        case "line":
          indicators = [
            { name: "1号生产线", max: 100 },
            { name: "2号生产线", max: 100 },
            { name: "3号生产线", max: 100 },
            { name: "4号生产线", max: 100 },
            { name: "5号生产线", max: 100 },
          ];
          currentData = [90, 87, 85, 88, 86];
          lastData = [88, 84, 82, 85, 83];
          break;
        default:
          indicators = [
            { name: "运行稳定性", max: 100 },
            { name: "设备完好率", max: 100 },
            { name: "故障频率", max: 100 },
            { name: "维护及时性", max: 100 },
            { name: "能耗水平", max: 100 },
          ];
          currentData = [88, 92, 85, 90, 78];
          lastData = [82, 85, 78, 86, 72];
      }

      const option = {
        animation: false,
        title: {
          text: "健康评分雷达图",
          left: "center",
          top: 0,
          textStyle: {
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        radar: {
          indicator: indicators,
          radius: "65%",
          center: ["50%", "55%"],
          name: {
            textStyle: {
              color: "#718096",
              fontSize: 12,
            },
          },
          splitLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
          splitArea: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
        },
        series: [
          {
            name: "健康评分",
            type: "radar",
            data: [
              {
                value: currentData,
                name: "当前评分",
                symbol: "circle",
                symbolSize: 8,
                lineStyle: {
                  width: 3,
                  color: "#4299e1",
                },
                itemStyle: {
                  color: "#4299e1",
                },
                areaStyle: {
                  color: "rgba(66, 153, 225, 0.2)",
                },
              },
              {
                value: lastData,
                name: "上月评分",
                symbol: "circle",
                symbolSize: 6,
                lineStyle: {
                  width: 2,
                  color: "#a0aec0",
                  type: "dashed",
                },
                itemStyle: {
                  color: "#a0aec0",
                },
                areaStyle: {
                  color: "rgba(160, 174, 192, 0.1)",
                },
              },
            ],
          },
        ],
      };

      chart.setOption(option, true);
    },
    updateHealthScoreTrendChart(viewType) {
      if (!this.$refs.healthScoreTrendChart) return;
      let chart = echarts.getInstanceByDom(this.$refs.healthScoreTrendChart);

      if (!chart) {
        chart = echarts.init(this.$refs.healthScoreTrendChart);
      }

      // 根据视图类型设置不同的趋势数据
      let trendData;
      let titleText;

      switch (viewType) {
        case "type":
          titleText = "设备类型健康评分趋势";
          trendData = [78.5, 80.2, 82.6, 84.1, 85.3, 86.0, 86.5];
          break;
        case "workshop":
          titleText = "车间健康评分趋势";
          trendData = [76.8, 78.5, 81.2, 83.6, 85.1, 86.3, 86.8];
          break;
        case "line":
          titleText = "生产线健康评分趋势";
          trendData = [79.2, 81.5, 83.8, 85.2, 86.1, 86.7, 87.2];
          break;
        default:
          titleText = "健康评分趋势";
          trendData = [78.5, 80.2, 82.6, 84.1, 85.3, 86.0, 86.5];
      }

      const option = {
        animation: false,
        title: {
          text: titleText,
          left: "center",
          top: 0,
          textStyle: {
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            axisLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
            axisLabel: {
              color: "#718096",
              fontSize: 10,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 70,
            max: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#718096",
              fontSize: 10,
            },
            splitLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
          },
        ],
        series: [
          {
            name: "健康评分",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 3,
              color: "#4299e1",
            },
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#4299e1",
            },
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            data: trendData,
          },
        ],
      };

      chart.setOption(option, true);
    },
    updateHealthMetrics(viewType) {
      // 根据视图类型更新健康指标数据
      switch (viewType) {
        case "type":
          this.healthMetrics = [
            {
              name: "冶炼设备",
              score: 85,
              percentage: 85,
              color: "#f56565",
              scoreColor: "text-red-600",
            },
            {
              name: "轧制设备",
              score: 88,
              percentage: 88,
              color: "#ed8936",
              scoreColor: "text-orange-600",
            },
            {
              name: "动力设备",
              score: 82,
              percentage: 82,
              color: "#ecc94b",
              scoreColor: "text-yellow-600",
            },
            {
              name: "环保设备",
              score: 90,
              percentage: 90,
              color: "#48bb78",
              scoreColor: "text-green-600",
            },
            {
              name: "检测设备",
              score: 87,
              percentage: 87,
              color: "#4299e1",
              scoreColor: "text-blue-600",
            },
          ];
          break;
        case "workshop":
          this.healthMetrics = [
            {
              name: "炼铁车间",
              score: 88,
              percentage: 88,
              color: "#f56565",
              scoreColor: "text-red-600",
            },
            {
              name: "炼钢车间",
              score: 85,
              percentage: 85,
              color: "#ed8936",
              scoreColor: "text-orange-600",
            },
            {
              name: "连铸车间",
              score: 90,
              percentage: 90,
              color: "#ecc94b",
              scoreColor: "text-yellow-600",
            },
            {
              name: "热轧车间",
              score: 87,
              percentage: 87,
              color: "#48bb78",
              scoreColor: "text-green-600",
            },
            {
              name: "冷轧车间",
              score: 82,
              percentage: 82,
              color: "#4299e1",
              scoreColor: "text-blue-600",
            },
          ];
          break;
        case "line":
          this.healthMetrics = [
            {
              name: "1号生产线",
              score: 90,
              percentage: 90,
              color: "#f56565",
              scoreColor: "text-red-600",
            },
            {
              name: "2号生产线",
              score: 87,
              percentage: 87,
              color: "#ed8936",
              scoreColor: "text-orange-600",
            },
            {
              name: "3号生产线",
              score: 85,
              percentage: 85,
              color: "#ecc94b",
              scoreColor: "text-yellow-600",
            },
            {
              name: "4号生产线",
              score: 88,
              percentage: 88,
              color: "#48bb78",
              scoreColor: "text-green-600",
            },
            {
              name: "5号生产线",
              score: 86,
              percentage: 86,
              color: "#4299e1",
              scoreColor: "text-blue-600",
            },
          ];
          break;
        default:
          // 保持原来的默认数据
          this.healthMetrics = [
            {
              name: "运行稳定性",
              score: 88,
              percentage: 88,
              color: "#4299e1",
              scoreColor: "text-blue-600",
            },
            {
              name: "设备完好率",
              score: 92,
              percentage: 92,
              color: "#48bb78",
              scoreColor: "text-green-600",
            },
            {
              name: "故障频率",
              score: 85,
              percentage: 85,
              color: "#ecc94b",
              scoreColor: "text-yellow-600",
            },
            {
              name: "维护及时性",
              score: 90,
              percentage: 90,
              color: "#9f7aea",
              scoreColor: "text-purple-600",
            },
            {
              name: "能耗水平",
              score: 78,
              percentage: 78,
              color: "#ed8936",
              scoreColor: "text-orange-600",
            },
          ];
      }
    },
    initHealthScoreRadarChart() {
      this.updateHealthScoreRadarChart(this.currentHealthView);
    },
    initHealthScoreTrendChart() {
      this.updateHealthScoreTrendChart(this.currentHealthView);
    },
    // 显示设备详情
    async showDeviceDetail(device) {
      
      await ElMessageBox.alert(
        `设备ID: ${device.id}<br>设备名称: ${device.name}<br>所属车间: ${device.workshop}<br>运行状态: ${device.status}<br>当前负载: ${device.load}<br>温度: ${device.temperature}<br>振动值: ${device.vibration}<br>健康评分: ${device.healthScore}`,
        "设备详情",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          customClass: "device-detail-modal",
        }
      );
    },
    // 监控设备
    async monitorDevice(device) {
      

      try {
        await ElMessageBox.confirm(
          `确定要开始监控设备 ${device.name} 吗？<br>设备ID: ${device.id}<br>所属车间: ${device.workshop}`,
          "确认监控",
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: "开始监控",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        // 用户确认监控
        ElMessage.success(`开始监控设备: ${device.name}`);

        // 这里可以添加实际的监控逻辑，比如跳转到监控页面
        // this.$router.push(`/monitor/${device.id}`);
      } catch (error) {
        // 用户取消操作
        ElMessage.info("已取消监控操作");
      }
    },
  },
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* 自定义颜色类 */
.bg-blue-100 {
  background-color: #ebf8ff;
}

.bg-red-100 {
  background-color: #fed7d7;
}

.bg-green-100 {
  background-color: #c6f6d5;
}

.bg-yellow-100 {
  background-color: #fefcbf;
}

.bg-purple-100 {
  background-color: #e9d8fd;
}

.bg-orange-100 {
  background-color: #feebc8;
}

.bg-teal-100 {
  background-color: #b2f5ea;
}

.bg-indigo-100 {
  background-color: #e5edff;
}

.text-blue-600 {
  color: #3182ce;
}

.text-red-600 {
  color: #e53e3e;
}

.text-green-600 {
  color: #38a169;
}

.text-yellow-600 {
  color: #d69e2e;
}

.text-purple-600 {
  color: #805ad5;
}

.text-orange-600 {
  color: #dd6b20;
}

.text-teal-600 {
  color: #319795;
}

.text-indigo-600 {
  color: #5a67d8;
}
</style>
